<template>
    <el-card :style="{minHeight:`${height}px`}">
        <div slot="header" style="text-align: right">
            <el-button type="primary" @click="addStep">新增阶段</el-button>
            <el-button @click="editStep">编辑阶段</el-button>
            <el-button type="danger" @click="deleteStep">删除阶段</el-button>
        </div>
        <div class="content" v-if="isShow">
            <js-mind
                :values="treeData"
                :height="`${tableHeight}px`"
                :options="options"
                ref="jsMind"
            ></js-mind>

            <i class="iconBtn big" @click="flowZoom('in')">+</i>
            <i class="iconBtn samll" @click="flowZoom('out')">-</i>
        </div>
    </el-card>
</template>

<script>
    import jsMind from 'vue-jsmind'
    import {flowTree,flowStepAdd,flowStepEdit,flowStepDelete} from '@/api/flowChart'
    import {getHeight} from "@/utils/regular";

    export default {
        name: "flowTree",
        components:{
            jsMind,
        },
        data() {
            return {
                height: 0,
                tableHeight: 500,
                flowId:'',
                options:{
                    container:'jsmind_container',
                    editable:false,
                    theme:'primary'
                },
                jm:null,
                treeData:{},
                isShow:false,

            }
        },
        created() {
            this.flowId = this.$route.params.flowId
            this.height = getHeight() - 92
            this.tableHeight = getHeight() - 215
            this.getDetail()
        },
        methods: {
            // 获取详情
            getDetail() {
                this.isShow = false
                flowTree(this.flowId)
                    .then(res=>{
                        if(Number(res.code)===0){
                            this.treeData = res.data
                            this.isShow = true

                            this.$nextTick(()=>{
                                this.jm = this.$refs.jsMind.jm
                            })
                        }else{
                            this.$Alert({ message:res.msg, type:'error' })
                        }
                    })
            },
            // 缩放
            flowZoom(state){
                if(state == 'in'){
                    this.jm.view.zoomIn()
                }else{
                    this.jm.view.zoomOut()
                }
            },
            // 新增阶段
            addStep(){
                var selected_node = this.jm.get_selected_node();
                if(!selected_node)return  this.$Alert({ message:'请选择阶段', type:'warning' })

                this.$Prompt({
                    title: '添加阶段',
                    inputPlaceholder: '请输入阶段内容',
                    inputValidator: val => {
                        if (!val) return '阶段内容不能为空'
                    },
                    success: value => {
                        let params = {
                            content:value,
                            flow_id:this.flowId,
                            parent_id:selected_node.isroot?null:selected_node.id,
                        }
                        flowStepAdd(params)
                            .then(res => {
                                if (Number(res.code) === 0) {
                                    this.$Alert({message: res.msg, type: 'success'})
                                    this.getDetail()
                                } else {
                                    this.$Alert({message: res.msg, type: 'error'})
                                }
                            })
                    }
                })
            },
            // 编辑阶段
            editStep(){
                var selected_node = this.jm.get_selected_node();
                if(!selected_node)return  this.$Alert({ message:'请选择阶段', type:'warning' })
                if(selected_node.isroot)return  this.$Alert({ message:'根节点不能直接编辑', type:'warning' })

                this.$Prompt({
                    title: '编辑标签',
                    inputValue: selected_node.topic,
                    inputPlaceholder: '请输入新标签名称',
                    inputValidator: val => {
                        if (!val) return '新标签名称不能为空'
                    },
                    success: value => {
                        let params = {
                            content:value,
                        }
                        flowStepEdit(selected_node.id, params)
                            .then(res => {
                                if (Number(res.code) === 0) {
                                    this.$Alert({message: res.msg, type: 'success'})
                                    this.getDetail()
                                } else {
                                    this.$Alert({message: res.msg, type: 'error'})
                                }
                            })
                    }
                })
            },
            // 删除阶段
            deleteStep() {
                var selected_node = this.jm.get_selected_node();
                if(!selected_node)return  this.$Alert({ message:'请选择阶段', type:'warning' })

                this.$Confirm({
                    message: '确定删除阶段',
                    confirmButtonText: '立即删除',
                    success: () => {
                        flowStepDelete(selected_node.id)
                            .then(res => {
                                if (Number(res.code) === 0) {
                                    this.getDetail()
                                    this.$Alert({message: res.msg, type: 'success'})
                                } else {
                                    this.$Alert({message: res.msg, type: 'error'})
                                }
                            })
                    }
                })
            },
        },
    }
</script>

<style scoped lang="less">
    .content{
        position: relative;
        width: 100%;
        background: #eee;

        .iconBtn{
            position: absolute;
            width: 30px;
            height: 30px;
            background: #fff;
            border:1px solid #ccc;
            font-style: normal;
            text-align: center;
            line-height: 30px;
            color:#333;
            bottom: 0;
            cursor: pointer;
            z-index: 33;

            &.big{
                right: 35px;
            }
            &.samll{
                right: 0;
            }
        }
    }
</style>
